<template>
	<view class="relative" :style="{height: system.screenHeight + 'px'}">
		<nav-header title="常见问题">
			<view class="bg-white pt-4">
				<view class="mx-4">
					<u-search placeholder="输入你要咨询的问题" v-model="keyword" :showAction="false" height="40" bgColor="#ffffff" searchIconColor="#cccccc" 
						borderColor="#aaaaaa" placeholderColor="#cccccc" @search="search" @clear="search"></u-search>
				</view>
				<my-page ref="mypage" v-model="dataList" :height="parseInt(system.screenHeight * 0.5)" :contentClass="['pt-6']" @load-data="loadData">
					<template slot="content">
						<view v-for="(item,index) in dataList" :key="index" class="mx-4 px-2 py-4 flex justify-between items-center" :class="{'border-b-ee': index != (dataList.length - 1)}"
							@click="$util.myNavigateTo('/pages/common/article_detail?code=common_problem&id=' + item.id)">
							<text class="text-black-33 pr-2" v-text="item.title"></text>
							<u-icon name="arrow-right" color="#bfbfbf" size="16"></u-icon>
						</view>
					</template>
				</my-page>
			</view>
		</nav-header>
		<view class="absolute bottom-4 w-full flex items-center justify-center py-4" @click="$util.myNavigateTo('/pages/question/index?type=employ')">
			<image src="@/static/employ/wtzx.png" class="w-6 h-6 mr-2"></image>
			<text class="text-color-theme font-bold">我要咨询其他问题</text>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import NavHeader from '@/components/nav_header.vue'
	import MyPage from '@/components/my_page.vue'
	import * as articleApi from '@/interface/junchuang/article.js'
	import MescrollPageMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-page.js"
	export default {
		mixins: [MescrollPageMixin],
		components: {
			NavHeader,MyPage
		},
		data() {
			return {
				keyword: '',
				dataList: [],
				data: {pageTotal: 0},
			}
		},
		computed: {
			...mapState({
				user: state => state.user,
				system: state => state.system
			})
		},
		onPullDownRefresh () {
			this.$refs['mypage'].dataReload()
			uni.stopPullDownRefresh()
		},
		methods: {
			loadData(page, success, error){
				const v = this;
				Object.assign(v.data, page, {
					title: v.keyword,
					code: 'common_problem'
				})
				articleApi.getArticlePageList(v.data).then(res=>{
					v.data.pageTotal = res.data.total || 0
					success(res)
				}).catch(error)
			},
			search () {
				this.$refs['mypage'].dataReload()
			}
		}
	}
</script>

<style>
	page{
		background-color: #f7f7f7;
	}
	
	.greenGradient {
		background: #5c9a5d;
		background: -webkit-linear-gradient(to top,#5c9a5d,#417a3c);
		background: linear-gradient(to top,#5c9a5d,#417a3c);
	}
	
	.blueGradient {
		background: #60A5FA;
		background: -webkit-linear-gradient(to right,#60A5FA,#3c7cd3);
		background: linear-gradient(to right,#60A5FA,#3c7cd3);
	}
</style>
